<!--
 * @Author: your name
 * @Date: 2025-04-09 09:43:00
 * @LastEditors: your name
 * @LastEditTime: 2025-06-14 09:51:49
 * @Description: 
 * @FilePath: \RuoYi-Vue3\src\components\MessagePopup\index.vue
-->
<template>
    <div id="Notify" @click="handleNotifyClick"></div>
</template>

<script setup>
import { onMounted, onUnmounted, getCurrentInstance, ref } from 'vue';
import { filterCommon } from '@/utils/utils';
import { faultType } from '@/utils/type';
import audioUrl from '@/assets/sond/alarm.mp3';
import { ElNotification } from 'element-plus'; // 引入 ElNotification
import { useInfoStore } from '@/store/modules/info.js'
const infoStore = useInfoStore();
const audio = new Audio(audioUrl);
let thisAudioTimer = null;
const isAudioPlaying = ref(false); // 新增标志位
const isUserInteracted = ref(false); // 新增用户交互标志

const emit = defineEmits(['navigate'])
// 定义 handleMessage 函数
// 添加全局点击事件处理函数 - 组件级别的事件委托（不再使用）
const handleNotifyClick = (e) => {
    // 此函数保留但不再使用，避免修改模板结构
    // 所有点击事件由 handleGlobalClick 统一处理
};

// 全局点击事件处理函数 - 使用事件源标识避免重复处理
const handleGlobalClick = (e) => {
    // 添加事件源标识，避免重复处理同一事件
    if (e._processed) {
        return;
    }
    e._processed = true;
    // 检查是否点击了通知内容或通知容器
    const target = e.target;
    if (target && (
        target.classList.contains('notify-content') || 
        target.closest('.notify-content') ||
        target.classList.contains('el-notification') ||
        target.closest('.el-notification')
    )) {
        handleStopAudio();
    }
};

const handleMessage = (event) => {
    try {
        const message = event.data;
        const data = JSON.parse(message);
        console.log(data)
        
        // 如果已经有音频在播放，只创建通知但不重新播放音频
        let notify = ElNotification({
            title: `设备报警信息`,
            type: 'error',
            duration: 0,
            onClick: () => {
                console.log('点击通知，停止音频');
                handleStopAudio(); // 使用统一的处理函数
                // 接地类型==0  电压==1234
                let path = data.type === 0 ? '/cloudTv/warning/grounding' : '/cloudTv/warning/voltage';
                emit('navigate', path);
                ElNotification.closeAll();
            },
            // onClose 回调函数
            onClose: () => {
                console.log('点击通知关闭按钮，停止音频');
                handleStopAudio(); // 使用统一的处理函数
            },
            dangerouslyUseHTMLString: true, 
            position: 'bottom-right',
            message: `<div class="notify-content" style="cursor:pointer;" data-notification-id="${Date.now()}-${Math.random().toString(36).substr(2, 9)}">${data.mes}</div>`
        });
        // 接地类型==0 播放语音
        if(data.type==0){
            // 只有在没有音频播放时才开始播放
            if (!infoStore.AudioPlay && !isAudioPlaying.value) {
                isAudioPlaying.value = true;
                infoStore.AudioPlay = true;
                audio.play();
                thisAudioTimer = setInterval(() => {
                    audio.play();
                }, 2000);
            }
        }
    } catch (error) {
        console.error('处理消息出错:', error);
    }
};

// 封装 stop 函数
const stopAudio = () => {
    clearInterval(thisAudioTimer);
    audio.pause();
    audio.currentTime = 0;
    isAudioPlaying.value = false;
};

// 关闭所有通知的方法
const closeAllNotifications = () => {
    ElNotification.closeAll();
};

const rou = () => {
   console.log(router);
};

// 导出 handleMessage 方法，以便外部调用
defineExpose({
    handleMessage
});

// 用户首次交互时更新标志
const handleUserInteraction = () => {
    isUserInteracted.value = true;
    window.removeEventListener('click', handleUserInteraction);
};

// 定义防抖函数，避免短时间内多次调用
const debounce = (fn, delay) => {
    let timer = null;
    let lastCallTime = 0;
    return function(...args) {
        const now = Date.now();
        // 如果距离上次调用时间小于延迟时间的一半，直接返回，不执行任何操作
        if (now - lastCallTime < delay / 2) {
            return;
        }
        
        lastCallTime = now;
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
            timer = null;
        }, delay);
    };
};

// 定义事件处理函数，使用防抖处理避免多次触发
const handleStopAudio = debounce(() => {
    // 检查音频是否正在播放，避免重复操作
    if (isAudioPlaying.value || infoStore.AudioPlay) {
        stopAudio();
        infoStore.AudioPlay = false;
        console.log('音频已停止');
    } else {
        console.log('音频已经停止，无需重复操作');
    }
}, 300); // 300毫秒的防抖延迟

onMounted(() => {
    window.addEventListener('click', handleUserInteraction);
    // 添加全局点击事件监听器，使用捕获阶段以确保先于其他点击处理程序执行
    document.addEventListener('click', handleGlobalClick, true);
});

onUnmounted(() => {
    console.log('MessagePopup 组件卸载，清理资源');
    clearInterval(thisAudioTimer);
    stopAudio();
    closeAllNotifications(); // 组件卸载时关闭所有通知
    window.removeEventListener('click', handleUserInteraction);
    document.removeEventListener('click', handleGlobalClick, true);
});
</script>
<style lang="scss">
.notify-content {
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        color: #0088ee;
    }
}
</style>
